<template>
	<view v-show="pageShow">
		<view class="uni-form-item" style="margin-bottom: 20rpx;">
			<view class="uni-input-container">
				<view class="uni-input-view">
					<input class="uni-input" v-model="goodsCode" :focus="true" @confirm="handleConfirm" placeholder="请扫描货品代码" />
					<image src="/static/scan.png" class="scan" @click="handleScan" />
				</view>
				<image src="/static/search.png" class="search" @click="handleConfirm" />
			</view>
		</view>
		<!-- 入库单 -->
		<view class="list-card">
			<uni-card :title="'入库单号：' + bill.billNo">
				<view class="item">
					<view class="item-content">
						<label>状态：</label>
						<text class="status" :class="{warning: bill.inBillState < '400'}">{{bill.inBillStateName || '-'}}</text>
					</view>
					<view class="item-content">
						<label>类型：</label>
						<text>{{bill.inOrderTypeName || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>外部单号：</label>
						<text>{{bill.outOrderNo || '-'}}</text>
					</view>
					<view class="item-content">
						<label>预期收货：</label>
						<text>{{bill.expectedArrivalTime ? $formatter.formatDate(new Date(bill.expectedArrivalTime)) : '-'}}</text>
					</view>
				</view>
				<view class="item-footer">
					<view class="footer-item">
						<label>总预期量</label>
						<text>{{bill.totalExpect ? parseInt(bill.totalExpect) : '-'}}</text>
					</view>
					<view class="footer-item">
						<label>已收数量</label>
						<text>{{bill.totalGoods ? parseInt(bill.totalGoods) : '-'}}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 货品明细 -->
		<view class="list-card" v-if="!!list.length">
			<uni-card title="货品明细">
				<view class="list-item-detail" v-for="item in list" :key="item.no">
					<view class="item">
						<view class="item-content">
							<label>货品代码：</label>
							<text>{{item.goodsCode || '-'}}</text>
						</view>
						<view class="item-content">
							<label>行号：</label>
							<text>{{item.outOrderRowNo || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{item.goodsName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>外部单号：</label>
							<text>{{item.outOrderNo || '-'}}</text>
						</view>
						<view class="item-content">
							<label>状态：</label>
							<text class="status" :class="{warning: item.receiveCargo !== '3'}">{{item.receiveCargoName || '-'}}</text>
						</view>
					</view>
					<view class="item-footer">
						<view class="footer-item">
							<label>总预期量</label>
							<text>{{item.expectQuantity ? parseInt(item.expectQuantity) : '-'}}</text>
						</view>
						<view class="footer-item">
							<label>已收数量</label>
							<text>{{item.receiveAmount ? parseInt(item.receiveAmount) : '-'}}</text>
						</view>
						<view class="footer-item">
							<label>未收量</label>
							<text>{{parseInt(item.expectQuantity || 0) - parseInt(item.receiveAmount || 0)}}</text>
						</view>
						<view class="footer-item">
							<label>托盘号</label>
							<text>{{item.palletCode || '-'}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<no-data :visible="!list.length" title="暂无数据" style="margin-top: 100rpx;"></no-data>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';
	import noData from '@/components/no-data/no-data.vue';

	export default {
		components: {
			uniCard,
			noData
		},
		data() {
			return {
				pageShow: false,
				goodsCode: null,
				params: {
					limit: 1000,
					page: 1
				},
				bill: {},
				originList: [],
				list: []
			}
		},
		onLoad(e) {
			this.bill = JSON.parse(e.bill);
			this.params.billId = this.bill.id;
			uni.showLoading({
				title: '加载中'
			});
			this.fetch();
		},
		methods: {
			handleScan() {
				this.$scan(res => {
					this.goodsCode = res;
					this.handleConfirm();
				});
			},
			handleConfirm() {
				if (this.goodsCode) {
					this.$api.goods.listScan({
						ownerId: this.bill.ownerId,
						code: this.goodsCode
					}).then(res => {
						const _goodsCodeList = res.data.map(v => v.code.toLowerCase());
						this.list = this.originList.filter(v => _goodsCodeList.includes(v.goodsCode.toLowerCase()));
					});
				} else {
					this.list = [...this.originList];
				}
			},
			fetch() {
				this.$api.receiveCargo.billCargoList(this.params).then(res => {
					this.originList = [...res.data];
					this.list = [...res.data];
					this.pageShow = true;
					uni.hideLoading();
				}, () => uni.hideLoading());
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-input-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
		width: calc(100% - 120rpx);
		border: 2rpx solid #EEEEEE;
		border-radius: 10rpx;
	}

	.uni-input {
		border: none;
		border-radius: 0;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 20px;
		font-weight: normal;
		font-style: normal;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: #999999;
		margin-right: 10rpx;
	}

	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}
</style>
